<script setup>
import { computed  } from 'vue'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/store/business/user.js'
// import { useRouter } from 'vue-router'

const { t } = useI18n()
const userStore = useUserStore()
// const userInfo = computed(() => userStore.userInfo)
const userInfo = computed(() => userStore.userInfo)

// 监听 userInfo.username 的变化
// const router = useRouter()
// watch(
//   () => userInfo.value.username,
//   (newVal) => {
//     if (!newVal) {
//       router.push('/login') // 跳转到登录页
//     }
//   },
//   { immediate: true }
// )

const truncateString=(str)=> {
  return str.length > 6 ? str[0].toUpperCase() : str;
}
const logout = () => {
  userStore.logout()
}
</script>

<template>
  <a-dropdown>
    <template #overlay>
      <a-menu>
        <a-menu-item @click="logout">{{ t('setting.logout') }}</a-menu-item>
      </a-menu>
    </template>
    <a-avatar :src="userInfo.avatar" :alt="userInfo.username"> 
      {{ userInfo.username? truncateString(userInfo.username) : 'Null' }}
    </a-avatar>
  </a-dropdown>
</template>

<style scoped lang="less"></style>
